import { history } from 'umi'
import { useTabs } from './hooks/useTabs'
import { Empty, Tabs } from 'antd-mobile'
import styles from './index.module.less'
import DispatchTask from '@/pages/dispatchTask/index'
import ClassManage from '@/pages/classManage/index'
import TrainPlan from '@/pages/trainPlan/index/index'
import ClassAudit from '@/pages/classAudit/index/index'
import TeacherDispatch from '@/pages/teacherDispatch/index/index'
import NavBar from '@/components/Global/NavBar'

export const TrainIndex = () => {
    const historyQuery = history.location.query as { tab: string }
    const defaultTab = historyQuery.tab

    const [tabs, activeTab, setActiveTab] = useTabs({ defaultTab: defaultTab })
    // TAB选项大于1个时才展示Tab组件
    const showTabBar = tabs.length > 1

    const onTabChange = (value: string) => {
        setActiveTab(value)
        history.replace({ pathname: '/train', query: { tab: value } })
    }

    const renderChildren = () => {
        switch (activeTab) {
            case 'task':
                // 派遣任务
                return <DispatchTask />
            case 'classManage':
                // 班级管理
                return <ClassManage />
            case 'trainPlan':
                // 培训计划
                return <TrainPlan />
            case 'dispatch':
                // 师资派遣
                return <TeacherDispatch />
            case 'classAudit':
                // 开班审核
                return <ClassAudit />
            default:
                return <Empty />
        }
    }

    return (
        <div className={styles.page}>
            <NavBar title="培训管理" />
            {showTabBar && (
                <div className={styles.tabsView}>
                    <Tabs
                        style={{
                            lineHeight: '40px',
                            '--content-padding': '0',
                            '--title-font-size': '16px',
                        }}
                        activeKey={activeTab}
                        onChange={onTabChange}
                    >
                        {tabs.map(item => {
                            return <Tabs.Tab title={item.label} key={item.value} />
                        })}
                    </Tabs>
                </div>
            )}

            {renderChildren()}
        </div>
    )
}

export default TrainIndex
